<template>
  <UiHeader class="ui-header" :showBanner="false" />
  <img class="banner" src="../assets/list/banner.png" />
  <div class="ui-center">
    <div class="title">
      <span>{{ props.title }}</span>
    </div>
    <div class="tabs-box ui-flex align-center justify-center">
      <template v-for="(item, index) in props.tabs">
        <div :class="['item', { on: index === active }]" v-if="index === active" :key="index" @click="Change(index)">{{ item }}</div>
      </template>
    </div>
  </div>
</template>

<script setup>
let props = defineProps({
  title: {
    type: String,
    default: () => ''
  },
  tabs: {
    type: Array,
    default: () => []
  },
  active: {
    type: Number,
    default: () => ''
  }
});

let active = ref(''),
  emits = defineEmits(['change']);
const Change = index => {
  active.value = index;
  emits('change', index);
};

watch(active, () => {
  active.value = props.active;
});

onMounted(() => {
  active.value = props.active;
});
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.title {
  padding: 70px 0 23px;
  text-align: center;
  border-bottom: 1px solid #d3b491;
  margin-bottom: 25px;
  span {
    font-size: 24px;
    color: #7c715f;
    line-height: 35px;
    display: inline-flex;
    align-items: center;
    &::before {
      content: '';
      display: block;
      width: 23.81px;
      height: 33px;
      margin-right: 20px;
      @include bgImg('../assets/list/title-icon.png');
    }
    &::after {
      content: '';
      display: block;
      width: 23.81px;
      height: 33px;
      margin-left: 20px;
      @include bgImg('../assets/list/title-icon.png');
      transform: rotate(180deg);
    }
  }
}
.tabs-box {
  border-bottom: 1px solid #d3b491;
  .item {
    font-size: 18px;
    color: #7c715f;
    padding: 19.5px 100px;
    border-bottom: 1px solid transparent;
    line-height: 26px;
    position: relative;
    cursor: pointer;
    &:first-child {
      // margin-right: 10px;
      // &::after {
      //   position: absolute;
      //   top: 50%;
      //   right: 0;
      //   transform: translate(100%, -50%);
      //   content: '';
      //   display: block;
      //   width: 10px;
      //   height: 26px;
      //   @include bgImg('../assets/list/tabs-divider.png');
      //   flex-shrink: 0;
      // }
    }
    &.on {
      color: #9c2c29;
      font-size: 18px;
      font-weight: bold;
      border-color: #9c2c29;
    }
  }
}
</style>
